<!DOCTYPE html><html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>frameAnime.css</title>
    <link rel="stylesheet" href="./src/highlight.css">
    <link rel="stylesheet" href="./src/frameAnime.min.css">
    <style>
        .frameAnime {  /* 精灵图动画自定义配置 */
            --un: 1px;  /* 图片长度单位 */
            --size: 200;  /* 每帧图初始大小 */
        }

        .img-1 {
            --size: 156;  /* 实际大小，图片短边为Y轴高度 */
            --wh-w: calc(7020 / 156);
            --step: 20;
            --frame: 45;
            background-image: url(./img/img-1.png);
        }
        .img-2 {
            --size: 174;  /* 实际大小，图片短边为X轴宽度 */
            --wh-h: calc(174 / 1512);
            --step: 8;
            --frame: 12;
            --r: 45;  /* 调整图片的旋转角度 */
            --sx: -1;  /* 帧画面以X轴反方向显示 */
            --bx: 0;  /* 帧画面从上到下扫描需设置 --bx: 0; --by: 1 */
            --by: 1;
            background-image: url(./img/img-2.png);
        }
        .img-3 {
            --size: 77;
            --wh-w: calc(1272 / 77);
            --step: 20;
            --frame: 12;
            background-image: url(./img/img-3.png);
        }
        .img-4 {
            --size: 143;
            --wh-w: calc(927 / 143);
            --step: 12;
            --frame: 4;
            --e-x: 18;  /* X轴自身偏移 */
            background-image: url(./img/img-4.png);
        }
        #img-5 {
            --size: calc(544 / 4);  /* 实际大小，图片短边为Y轴高度，扫描方向X轴共4行 */
            --wh-w: calc(1245 / 544);
            --step: 5;
            --frame: 5;
            /* --frame-x: 5; */
            background-image: url(./img/img-5.png);
        }
        .img-6._x5 {  /* 以类名设置的样式若图片帧画面有多行或多列需额外添加帧动画设定类名 */
            --size: calc(695 / 5);
            --wh-w: calc(1650 / 695);
            --step: 5;
            /* --frame: 6; */
            --frame-x: 6;
            background-image: url(./img/img-6.png);
        }
        .img-7._x5 {
            --size: calc(830 / 5);
            --wh-w: calc(2205 / 830);
            --step: 5;
            /* --frame: 5; */
            --frame-x: 5;
            background-image: url(./img/img-7.png);
        }
        .img-7._y5 {
            --size: calc(830 / 5);
            --wh-w: calc(2205 / 830);
            --step: 2;
            /* --frame: 5; */
            --frame-y: 5;
            background-image: url(./img/img-7.png);
        }

        html, body {
            margin: 0;
            font-size: 16px;
            background: #fcfcfc;
        }
        #content > div {
            padding: 25px 0;
            border-bottom: 2px solid #ddd;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }
        #content > div:last-of-type {
            border-bottom: none;
        }
        #content > div > * {
            margin: 25px 50px;
            flex-shrink: 0;
        }
        #content > div pre {
            position: relative;
            width: 38em;
            max-height: 25em;
            padding: 1.75em;
            border-radius: 0.5em;
            font-size: 0.9em;
            line-height: 150%;
            color: #fff;
            background: #1E1E1E;
            box-shadow: 0 0 0.5em #1E1E1E;
            overflow: auto;
            text-align: left;
            box-sizing: border-box;
        }
        #content > div pre ~ pre {
            width: auto;
        }
        #content > div pre, #content > div pre code {
            font-family: Consolas, Monaco, 'Courier New', monospace;
        }
        #content > div pre::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
        #content > div pre::-webkit-scrollbar-corner { background: transparent; }
        #content > div pre::-webkit-scrollbar-thumb { border-radius: 10px; background: #585858; }
        #content > div pre::-o-scrollbar { width: 10px; height: 10px; background: transparent; }
        #content > div pre::-o-scrollbar-corner { background: transparent; }
        #content > div pre::-o-scrollbar-thumb { border-radius: 10px; background: #585858; }
        #content > div pre a {
            position: absolute;
            bottom: 1em;
            right: 1.5em;
            color: #569CD6;
            text-decoration: none;
        }
        #content > div pre a:hover {
            color: #9CDCFE;
        }
        @media only screen and (min-height: 100vw) {
            .frameAnime {
                max-width: 100%;
            }
            #content > div {
                width: 100%;
                flex-direction: column;
                justify-content: center;
                overflow-x: hidden;
            }
            #content > div > * {
                margin: 25px 0;
            }
            #content > div pre, #content > div pre ~ pre {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <div id="content">
        <div>
            <pre>
<code>.frameAnime {  /* 精灵图动画自定义配置 */
    --un: 1px;  /* 图片长度单位 */
    --size: 200;  /* 每帧图初始大小 */
}</code></pre>
<pre>
<code>/* 操作说明 */</code>

• 单击图片暂停动画，为元素添加类名 pause
• 双击图片停止动画，为元素添加类名 end
</pre>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime img-1"&gt;&lt;/div&gt;</code>

<code>.img-1 {
    --size: 156;  /* 实际大小，图片短边为Y轴高度 */
    --wh-w: calc(7020 / 156);
    --step: 20;
    --frame: 45;
    background-image: url(./img/img-1.png);
}</code><a></a></pre>
            <div class="frameAnime img-1"></div>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime img-2"&gt;&lt;/div&gt;</code>

<code>.img-2 {
    --size: 174;  /* 实际大小，图片短边为X轴宽度 */
    --wh-h: calc(174 / 1512);
    --step: 8;
    --frame: 12;
    --r: 45;  /* 调整图片的旋转角度 */
    --sx: -1;  /* 帧画面以X轴反方向显示 */
    --bx: 0;  /* 帧画面从上到下扫描需设置 --bx: 0; --by: 1 */
    --by: 1;
}</code><a></a></pre>
            <div class="frameAnime img-2"></div>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime img-3"&gt;&lt;/div&gt;</code>

<code>.img-3 {
    --size: 77;
    --wh-w: calc(1272 / 77);
    --step: 20;
    --frame: 12;
}</code><a></a></pre>
            <div class="frameAnime img-3"></div>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime img-4"&gt;&lt;/div&gt;</code>

<code>.img-4 {
    --size: 143;
    --wh-w: calc(927 / 143);
    --step: 12;
    --frame: 4;
    --e-x: 18;  /* X轴自身偏移 */
}</code><a></a></pre>
            <div class="frameAnime img-4"></div>
        </div>
        <div>
            <pre>
<code>&lt;div id="img-5" class="frameAnime _x4"&gt;&lt;/div&gt;</code>

<code>#img-5 {
    --size: calc(544 / 4);  /* 实际大小，图片短边为Y轴高度，扫描方向X轴共4行 */
    --wh-w: calc(1245 / 544);
    --step: 5;
    --frame: 5;
    /* --frame-x: 5; */
}</code><a></a></pre>
            <div id="img-5" class="frameAnime _x4"></div>
        </div>
        <div>
            <pre>
以类名设置的样式若图片帧画面有多行或多列需额外添加帧动画设定类名：

<code>&lt;div class="frameAnime _x5 img-6"&gt;&lt;/div&gt;</code>

<code>.img-6._x5 {
    --size: calc(695 / 5);
    --wh-w: calc(1650 / 695);
    --step: 5;
    /* --frame: 6; */
    --frame-x: 6;
}</code><a></a></pre>
            <div class="frameAnime _x5 img-6"></div>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime _x5 img-7"&gt;&lt;/div&gt;</code>

<code>.img-7._x5 {
    --size: calc(830 / 5);
    --wh-w: calc(2205 / 830);
    --step: 5;
    /* --frame: 5; */
    --frame-x: 5;
}</code><a></a></pre>
            <div class="frameAnime _x5 img-7"></div>
        </div>
        <div>
            <pre>
<code>&lt;div class="frameAnime _y5 img-7"&gt;&lt;/div&gt;</code>

<code>.img-7._y5 {
    --size: calc(830 / 5);
    --wh-w: calc(2205 / 830);
    --step: 2;
    /* --frame: 5; */
    --frame-y: 5;
}</code><a></a></pre>
            <div class="frameAnime _y5 img-7"></div>
        </div>
        
    </div>

</body>
<script src="./src/highlight.js"></script>
<script src="./src/demoTemplate.js"></script>
<script src="./src/frameAnime.js"></script>
<script>
    frameAnime_init();
    hljs.initHighlightingOnLoad();
    DemoTemplate({
        title: "frameAnime.css",
        subtitle: "CSS精灵图动画",
        fileURL: "frameAnime",
        fileName: "frameAnime.zip",
        fileSize: "320KB",
        resume: "通过控制CSS变量，以CSS3动画的方式播放精灵图序列帧，达到类似于gif动图的效果。",
        detail: `
            frameAnime.css （CSS精灵图动画）

            版本：v0.10
            更新：2021.1.26
            制作：MiiKio
            简述：通过控制CSS变量，以CSS3动画的方式播放精灵图序列帧，达到类似于gif动图的效果。
            详细教程：https://blog.csdn.net/ChisameMuko/article/details/113065823
            变量规则：
                --step: 每秒显示帧数
                --frame: 单个扫描方向轴上含有帧数
                --frame-x: 单个X轴上含有帧数 (设置时生效)
                --frame-y: 单个Y轴上含有帧数 (设置时生效)

                --un: 图片长度单位 (默认为页面宽高比最小的视口单位)
                --size: 每帧图大小 (以扫描方向相反的边恒定, 按宽高比计算，实际帧大小公式：图片短边的长度 / 扫描方向的行列数)
                --wh-w: 宽大于高时的实际图片宽高比，示例：calc(16 / 9)
                --wh-y: 高大于宽时的实际图片宽高比，示例：calc(9 / 16)
                --w: 帧画面计算宽度
                --h: 帧画面计算高度

                --bx: 启用向左横向扫描 ( 0: 关闭 | 1: 开启 )
                --by: 启用向下纵向扫描 ( 0: 关闭 | 1: 开启 )

                --r: 图片基础旋转角度
                --x: 图片X轴基础偏移
                --y: 图片Y轴基础偏移
                --s: 图片整体缩放大小
                --sx: 图片X轴缩放大小 (设置时生效)
                --sy: 图片Y轴缩放大小 (设置时生效)

                --o-r: 动画原始旋转角度
                --e-r: 动画结束旋转角度

                --o-x: 动画原始X轴偏移
                --o-y: 动画原始Y轴偏移
                --e-x: 动画结束X轴偏移
                --e-y: 动画结束Y轴偏移

                --o-sx: 动画原始X轴缩放大小
                --o-sy: 动画原始Y轴缩放大小
                --e-sx: 动画结束X轴缩放大小
                --e-sy: 动画结束Y轴缩放大小

                --iteration-self: 自身动画重复次数
                --iteration-move: 自身运动重复次数`
    });

    document.querySelectorAll(".frameAnime").forEach(function (e) {
        e.onclick = function () {
            this.classList.remove("end");
            this.classList.toggle("pause");
        };
        e.ondblclick = function () {
            this.classList.add("pause");
            this.classList.add("end");
        };
    });
    document.querySelectorAll("#content > div pre a").forEach(function (e) {
        e.href = window.getComputedStyle(e.parentElement.nextElementSibling).backgroundImage.replace(/(^url\("|"\)$)/g, "");
        e.target = "_blank";
        e.innerText = "查看原图";
    });
    
    console.log("Copyright (C) 2020 by MiiKio");
</script>
</html>